<template>
	<view class="box box-pading">

		<view class="nav flex-no-horizontal">
			<u-navbar :safeAreaInsetTop="true" bgColor="#FFF" rightIcon="more-dot-fill" :placeholder="true">

				<searchInput slot="left" @searchKeyConfirm="searchKeyConfirm"></searchInput>

				<view class="nav-right" slot="right" @click="cancel">
					取消
				</view>

			</u-navbar>
		</view>

		<view class="subhead flex-no-horizontal">

			<view class="subhead-left flex-no-horizontal">
				最近搜索
				<u-icon name="arrow-down" color="rgba(179, 180, 181, 1)" size="20" style="margin-left: 20rpx;"></u-icon>
			</view>

			<view class="subhead-right" @click="deleteSearch">
				<u-icon name="trash" color="rgba(179, 180, 181, 1)" size="28"></u-icon>
			</view>

		</view>

		<view class="main flex-no-horizontal">

			<view class="main-item" v-for="(item,index) in searchHistoryList" :key="index" @click="searchHistoryClick(item)">
				{{item}}
			</view>

		</view>


	</view>
</template>

<script>
	import searchInput from './common/navSearch.vue'
	export default {
		components:{
			searchInput
		},
		data() {
			return {
				dataList: [],
				searchHistoryList:[],
			};
		},
		computed: {

		},
		onLoad() {
			this.assignmentSearch()
		},
		methods: {
			
			//接受子级传值
			searchKeyConfirm(e){
				console.log(e)
				uni.navigateTo({
					url:'./searchDetail?key=' + e
				})
				this.setLocalSearchHistory(e)
				this.assignmentSearch()
			},
			
			//取消点击
			cancel(){
				uni.navigateBack()
			},
			
			//搜索历史点击
			searchHistoryClick(e){
				uni.navigateTo({
					url:'./searchDetail?key=' + e
				})
			},
			
			//赋值
			assignmentSearch(){
				if(this.getLocalSearchHistory()){
					this.searchHistoryList = this.getLocalSearchHistory()
				}
			},
			
			//获取本地搜索历史
			getLocalSearchHistory(){
				try {
					const value = uni.getStorageSync('searchHistory');
					if (value) {
						return JSON.parse(value)
					}else{
						return false
					}
				} catch (e) {
					// error
				}
			},
			
			//本地存储搜索历史
			setLocalSearchHistory(e){
				try {
					if(this.getLocalSearchHistory()){
						let searchList = this.getLocalSearchHistory()
						searchList.push(e)
						uni.setStorageSync('searchHistory', JSON.stringify(searchList));
					}else{
						let searchList = []
						searchList.push(e)
						uni.setStorageSync('searchHistory', JSON.stringify(searchList));
					}
				} catch (e) {
					// error
				}
			},
			
			//删除本地缓存历史
			deleteSearch(){
				try {
					this.searchHistoryList = []
					uni.removeStorageSync('searchHistory');
				} catch (e) {
					// error
				}
			},
			
		},
	};
</script>

<style lang="scss" scoped>
	.box {

		.nav {
			justify-content: space-between;
			
			.nav-right {
				color: $uni-color-black;
				font-size: $uni-font-size-base;
			}

		}

		.subhead {
			margin: 40rpx 0;
			justify-content: space-between;

			.subhead-left {
				color: $uni-color-black;
				font-size: $uni-font-size-base;
			}

		}

		.main {
			flex-wrap: wrap;

			.main-item {
				padding: 18rpx 26rpx;
				background-color: rgba(247, 247, 247, 1);
				border-radius: 30rpx;
				font-size: $uni-font-size-sm;
				color: $uni-color-black;
				margin: 0 20rpx 20rpx 0;
			}

		}

	}
</style>
